<template>
    <view class="uni-shadow" @tap.stop="detail">
        <view class="u-flex u-font-26">
            <text class="u-m-r-26 font-bold u-line-1" style="max-width:360rpx" @longtap="longTap(memberItem.xm)">{{memberItem.xm}}</text>
            <text class="u-m-r-26">{{memberItem.sex}}</text>
            <view v-if="memberItem.smrz" :class="['tag','u-m-r-26',memberItem.smrz=='已认证'?'active-tab':'']">{{memberItem.smrz}}</view>
            <text :class="[memberItem.ryzt=='进场'?'uni-higt-color':'uni-gery-color']">{{memberItem.ryzt}}</text>
        </view>
        <u-row customStyle="flex-wrap:wrap">
            <u-col :span="item.span" v-for="(item,index) in memberItem.list" :key="index" 
                class="u-m-t-20 u-font-26" style="flex-direction:row">
                <text class="u-m-r-14 uni-dec-color">{{item.title}}</text>
                <text v-if="item.field=='zjhm'">{{$tools.formatIdentity(item.value)}}</text>
                <text v-else-if="item.field=='attendance'" :class="[item.value=='已打卡'?'uni-higt-color':'uni-gery-color']">{{item.value}}</text>
                <text v-else-if="item.field=='salary'" :class="[item.value=='已发放'?'uni-higt-color':'uni-gery-color']">{{item.value}}</text>
                <text class="u-line-1" :style="{maxWidth:item.span==12?'80%':'60%'}" v-else >{{item.value}}</text>
            </u-col>
        </u-row>
    </view>
</template>


<script>
export default {
    name: 'memberItem',

    props: {
        listItem: {
            type: Object,
            default () {
                return {}
            }
        }
    },

    data(){
        return{
            memberItem:{
                xm: '', // xm
                sex: '男', // xb
                smrz: '待认证',
                ryzt: '未进场', 
                list :[
                    { field:'zjhm', span:7, title:'证件号码', value:'513701199858584512' },
                    { field:'districtName', span:5, title:'所属区划', value:'一师' },
                    { field:'gcmc', span:12, title:'项目名称', value:'某某项目' },
                    { field:'bzmc', span:7, title:'班组名称', value:'无敌小霸王' },
                    { field:'zwzc', span:5, title:'角色工种', value:'木工' }, 
                    { field:'attendance', span:7, title:'当天考勤', value:'未打卡' },
                    { field:'salary', span:5, title:'本月工资', value:'未发放' }
                ]
            },
        }
    },

    created() {
        this.init()
    },

    watch:{
        listItem: {
            handler(newName, oldName) {
                this.init()
            },
            immediate: true,
            deep: true,
        }
    },

    methods: {
        init(){
            this.memberItem.xm = this.listItem.xm
            this.memberItem.sex = this.listItem.xb
            this.memberItem.smrz = this.listItem.smrz
            this.memberItem.ryzt = this.listItem.ryzt
            if( this.listItem.list != undefined ){ // 展示父页面传入字段
                this.memberItem.list = this.listItem.list
            }else{ // 展示默认字段
                this.memberItem.list.map((v,i)=>{
                    if( v.field ){
                        v.value = this.listItem[v.field]?this.listItem[v.field]:'暂无数据源'
                    }else{
                        v.value = '暂无字段'
                    }
                })
            }
        },

        // 长按事件
        longTap(value){
            uni.$u.toast(value)
        },

        // 详情
        detail(){
            this.$emit('memberDetail')
        }
    },
}
</script>


<style lang="scss">
    .tag{
        font-size: 20rpx;
        background: #ffb61d;
        padding: 6rpx 10rpx;
        color: #fff;
        border-radius: 6rpx;
    }
    .active-tab{
        background: $uni-higt-error;
    }
</style>